<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>表单</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <script type="text/javascript" src="../../assets/lib/iframe-resizer-3.6.3/iframeResizer.contentWindow.min.js"></script>
  <link href="../../assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>

<body class="p-3">
  <div id="form_submit">
    <template v-if="pageType === 'form'">
      <div v-for="fieldInfo in fieldInfoList" class="form-group">
        <label> {{ fieldInfo.title }} <span v-if="fieldInfo.validate.indexOf('required') !== -1" class="text-danger">*</span>
          <small v-show="errors.has(fieldInfo.title)" class="text-danger">{{ errors.first(fieldInfo.title) }}</small>
        </label>
        <template v-if="fieldInfo.fieldType === 'TextArea'">
          <textarea v-model="fieldInfo.value" class="form-control" :style="'height: ' + (fieldInfo.height ? fieldInfo.height : 125) + 'px;'"
            :name="fieldInfo.title" v-validate="fieldInfo.validate" :class="{'is-invalid': errors.has(fieldInfo.title)}"></textarea>
        </template>
        <template v-else-if="fieldInfo.fieldType === 'CheckBox' && fieldInfo.columns === 0">
          <div class="m-2">
            <span v-for="(item, index) in fieldInfo.items" class="checkbox checkbox-primary">
              <input type="checkbox" v-model="fieldInfo.value" :id="fieldInfo.title + '_' + item.id" :value="item.value"
                :name="fieldInfo.title" v-validate="fieldInfo.validate">
              <label :for="fieldInfo.title + '_' + item.id" class="mr-2"> {{ item.value }} </label>
            </span>
          </div>
        </template>
        <template v-else-if="fieldInfo.fieldType === 'CheckBox' && fieldInfo.columns === 1">
          <div class="m-2">
            <div v-for="(item, index) in fieldInfo.items" class="checkbox checkbox-primary">
              <input type="checkbox" v-model="fieldInfo.value" :id="fieldInfo.title + '_' + item.id" :value="item.value"
                :name="fieldInfo.title" v-validate="fieldInfo.validate">
              <label :for="fieldInfo.title + '_' + item.id" class="mr-2"> {{ item.value }} </label>
            </div>
          </div>
        </template>
        <template v-else-if="fieldInfo.fieldType === 'Radio' && fieldInfo.columns === 0">
          <div class="m-2">
            <span v-for="(item, index) in fieldInfo.items" class="radio radio-primary">
              <input type="radio" v-model="fieldInfo.value" :id="item.value" :value="item.value" :name="fieldInfo.title"
                v-validate="fieldInfo.validate">
              <label :for="item.value" class="mr-2"> {{ item.value }} </label>
            </span>
          </div>
        </template>
        <template v-else-if="fieldInfo.fieldType === 'Radio' && fieldInfo.columns === 1">
          <div class="m-2">
            <div v-for="(item, index) in fieldInfo.items" class="radio radio-primary">
              <input type="radio" v-model="fieldInfo.value" :id="item.value" :value="item.value" :name="fieldInfo.title"
                v-validate="fieldInfo.validate">
              <label :for="item.value" class="mr-2"> {{ item.value }} </label>
            </div>
          </div>
        </template>
        <template v-else-if="fieldInfo.fieldType === 'SelectOne'">
          <select :name="fieldInfo.title" v-model="fieldInfo.value" class="form-control" :class="{'is-invalid': errors.has(fieldInfo.title) }"
            v-validate="fieldInfo.validate">
            <option v-for="item in fieldInfo.items" :value="item.value">{{ item.value }}</option>
          </select>
        </template>
        <template v-else-if="fieldInfo.fieldType === 'SelectMultiple'">
          <select multiple style="height: 130px" :name="fieldInfo.title" v-model="fieldInfo.value" class="form-control"
            :class="{'is-invalid': errors.has(fieldInfo.title) }" v-validate="fieldInfo.validate">
            <option v-for="item in fieldInfo.items" :value="item.value">{{ item.value }}</option>
          </select>
        </template>
        <template v-else-if="fieldInfo.fieldType === 'Image'">
          <file-pond
            :allow-multiple="false"
            :server="getUploadUrl(fieldInfo)"
            :files="files"
            accepted-file-types="image/jpeg, image/png, image/webp"
            label-idle="点击上传或将图片拖动至此区域..."
            label-file-processing="上传中..."
            label-file-processing-complete="上传成功"
            v-on:processfile="imageUploaded"
            v-on:removefile="imageRemoved(fieldInfo)"
          ></file-pond>

          <input
            v-model="fieldInfo.value"
            type="hidden"
            :name="fieldInfo.title"
            v-validate="fieldInfo.validate"
            :class="{'is-invalid': errors.has(fieldInfo.title)}"
          />
        </template>
        <template v-else-if="fieldInfo.fieldType === 'Date'">
          <date-picker style="width: 100%" :name="fieldInfo.title" v-model="fieldInfo.value" type="date" format="YYYY年MM月DD日"
            :minute-step="1" :clearable="false" :editable="false" v-validate="fieldInfo.validate"></date-picker>
        </template>
        <template v-else-if="fieldInfo.fieldType === 'DateTime'">
          <date-picker style="width: 100%" :name="fieldInfo.title" v-model="fieldInfo.value" type="datetime" format="YYYY年MM月DD日 HH:mm"
            :minute-step="1" :clearable="false" :editable="false" v-validate="fieldInfo.validate"></date-picker>
        </template>
        <template v-else>
          <input v-model="fieldInfo.value" type="text" class="form-control" :name="fieldInfo.title" v-validate="fieldInfo.validate"
            :class="{'is-invalid': errors.has(fieldInfo.title)}">
        </template>
      </div>
      <div v-if="isCaptcha" class="form-group">
        <label> 验证码 <span class="text-danger">*</span>
          <small v-show="errors.has('captcha')" class="text-danger">{{ errors.first('captcha') }}</small>
          <small v-show="captchaInValid" class="text-danger">验证码不正确，请重新输入！</small>
        </label>
        <div class="clearfix">
          <input v-model="captcha" type="text" class="form-control float-left" style="width:180px; margin-right: 10px"
            name="captcha" data-vv-as="验证码" v-validate="'required'" :class="{'is-invalid':
errors.has('captcha') || captchaInValid}">
          <img :src="captchaUrl" @click="loadCaptcha" class="float-left" style="width: 105px; height: 38px" />
        </div>
      </div>
      <hr />
      <div class="text-center">
        <button type="button" @click="btnSubmitClick" class="btn btn-primary w-md mr-2">提 交</button>
      </div>
    </template>
    <template v-else-if="pageType === 'error'">
      <div class="text-center" style="margin-top: 100px">
        <p class="lead mt-3 text-nowrap text-danger">{{ errorMessage }}</p>
      </div>
    </template>
    <template v-else-if="pageType === 'success'">
      <div class="text-center" style="margin-top: 100px">
        <p class="lead mt-3 text-nowrap text-primary">表单提交成功！</p>
      </div>
    </template>
    <template v-else>
      <div class="text-center" style="margin-top: 100px">
        <img class="mt-3" src="../../assets/images/loading.gif" />
        <p class="lead mt-3 text-nowrap">载入中，请稍后...</p>
      </div>
    </template>
  </div>
</body>

</html>
<script src="../../assets/lib/lodash-4.17.10.min.js"></script>
<script src="../../assets/lib/vue-2.5.16.min.js" type="text/javascript"></script>
<script src="../../assets/lib/vee-validate-2.1.0.js"></script>
<script src="../../assets/lib/vee-validate-locale-zh_CN-2.1.0.js"></script>
<script src="../../assets/lib/es6-promise.auto.min.js" type="text/javascript"></script>
<script src="../../assets/lib/axios-0.18.0.min.js"></script>
<script src="../../assets/lib/vue2-datepicker-2.4.3.min.js"></script>

<link href="../../assets/lib/filepond/filepond-4.4.2.min.css" rel="stylesheet" type="text/css"/>
<link href="../../assets/lib/filepond/filepond-plugin-image-preview-4.1.0.min.css" rel="stylesheet" type="text/css"/>
<script src="../../assets/lib/filepond/babel-polyfill-7.4.4.min.js"></script>
<script src="../../assets/lib/filepond/filepond-polyfill-1.0.4.min.js"></script>
<script src="../../assets/lib/filepond/filepond-plugin-file-validate-type-1.2.4.min.js"></script>
<script src="../../assets/lib/filepond/filepond-plugin-image-preview-4.1.0.js"></script>
<script src="../../assets/lib/filepond/filepond-4.4.2.min.js"></script>
<script src="../../assets/lib/filepond/vue-filepond-5.1.0.min.js"></script>

<script src="../../assets/js/submit.js" type="text/javascript"></script>
